﻿@page "/gantt-chart/row-height"
@using Syncfusion.Blazor.Gantt
@using ej2_blazor_defaultdata
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the Gantt row height feature. The following code example explains how to change the row height in Gantt Chart at load time.</p>
</SampleDescription>
<ActionDescription>
    <p>The Gantt row height feature is used to change the height of the row in the Gantt Chart by setting row height in pixels in the <code>RowHeight</code> property. To set the Gantt row height, enable the <code>RowHeight</code> property and set the values as pixel.</p>
    <p>More information about row height can be found in this <code><a target='_blank' class='code' href='https://blazor.syncfusion.com/documentation/gantt-chart/rows/#row-height'>documentation</a></code> section.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGantt DataSource="@TaskCollection" RowHeight=60 Height="450px" Width="100%" HighlightWeekends="true"
                     ProjectStartDate="@ProjectStart" ProjectEndDate="@ProjectEnd">
                <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate"
                                 Duration="Duration" Progress="Progress" ParentID="ParentId" Dependency="Predecessor">
                </GanttTaskFields>
                <GanttLabelSettings LeftLabel="TaskName" TValue="DefaultData.TaskData">
                </GanttLabelSettings>
                <GanttSplitterSettings Position="30%"></GanttSplitterSettings>
            </SfGantt>
        </div>
    </div>
</div>

@code{
    public DateTime ProjectStart = new DateTime(2019, 3, 24);
    public DateTime ProjectEnd = new DateTime(2019, 7, 6);
    public List<DefaultData.TaskData> TaskCollection { get; set; }

    protected override void OnInitialized()
    {
        this.TaskCollection = DefaultData.ProjectNewData();
    }
}
